<template>
  <div class="course-page">
    <div class="course-dropdown">
    </div>
    <!-- <div class="course-search-bar">
      <el-input v-model="searchKeyword" placeholder="请输入课程名称进行查询" clearable style="width: 300px;" />
    </div> -->
    <div class="course-list-area">
      <div v-for="(item, idx) in filteredCourseList" :key="idx" class="course-list-item">
        <div class="course-list-title">{{ (item.courseName || '').toUpperCase() }}</div>
        <div class="course-list-desc">{{ (item.courseIntroduce && item.courseIntroduce.length > 50) ? (item.courseIntroduce.slice(0, 50) + '...') : item.courseIntroduce }}</div>
            <div class="course-list-meta">
          <span :class="['course-list-difficulty', 'diff-' + item.difficulty]">
            难度：{{ difficultyText(item.difficulty) }}
          </span>
            </div>
        <div class="course-list-btns">
          <el-button
            v-if="item.type"
            type="success"
            @click="goToCourse(item)"
          >进入课程</el-button>
          <el-button
            v-else
            type="primary"
            @click="joinCourse(item)"
          >加入课程</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getCourseDetailVOService, getCourseListService, registerCourseService } from '@/apis/course'

const route = useRoute()
const router = useRouter()
const course = ref({})
const coverImg = ref('https://img1.baidu.com/it/u=1234567890,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500') // 可替换为课程图片字段
const courseList = ref([])
const searchKeyword = ref('')

const difficultyMap = {
  1: '普通',
  2: '中等',
  3: '困难'
}

const filteredCourseList = computed(() => {
  if (!searchKeyword.value) return courseList.value
  return courseList.value.filter(item => item.courseName && item.courseName.includes(searchKeyword.value))
})

onMounted(async () => {
  const id = route.query.id
  if (id) {
    const res = await getCourseDetailVOService(id)
    if (res.code === 1000) {
      course.value = res.data
    }
  }
  // 获取课程列表
  const resList = await getCourseListService()
  if (resList.code === 1000 && Array.isArray(resList.data)) {
    courseList.value = resList.data
  }
})

function difficultyText(val) {
  if (val === 1 || val === '1') return '简单';
  if (val === 2 || val === '2') return '中等';
  if (val === 3 || val === '3') return '困难';
  return val || '普通';
}

async function joinCourse(item) {
  const res = await registerCourseService(item.courseId || item.id)
  if (res.code === 1000) {
    ElMessage.success('报名成功！')
    item.type = true // 立即切换按钮
  } else {
    ElMessage.error(res.msg || '报名失败')
  }
}

function goToCourse(item) {
  // 跳转到课程详情页
  router.push({
    path: '/c-oj/home/course/detail',
    query: { id: item.courseId || item.id }
  })
}
</script>

<style lang="scss" scoped>
.course-page {
  position: relative;
  min-height: 400px;
  background: #f7f7f7;
}
.course-dropdown {
  position: absolute;
  top: 0;
  right: 0;
  margin: 20px 40px 0 0;
}
.course-detail-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding: 24px;
  margin: 40px auto 0 auto;
  max-width: 600px;
  min-width: 350px;
}
.course-cover {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 24px;
}
.course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-title {
  font-size: 28px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}
.course-desc {
  color: #888;
  font-size: 16px;
  margin-bottom: 8px;
}
.course-meta {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #888;
  margin-bottom: 16px;
  .teacher-name {
    margin-right: 24px;
    color: #666;
  }
  .course-difficulty {
    color: #32C5FF;
    font-weight: 600;
  }
}
.enroll-btn {
  width: 120px;
}
.course-list-area {
  margin: 40px auto 0 auto;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: flex-start;
}
.course-list-item {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 24px rgba(50,197,255,0.10);
  padding: 32px 24px 24px 24px;
  width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  transition: box-shadow 0.2s, transform 0.2s;
  &:hover {
    box-shadow: 0 8px 32px rgba(50,197,255,0.16);
    transform: translateY(-4px) scale(1.03);
  }
}
.course-list-title {
  font-size: 22px;
  font-weight: 700;
  color: #222;
  margin-bottom: 12px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.course-list-desc {
  color: #666;
  font-size: 15px;
  margin-bottom: 14px;
  text-align: center;
  min-height: 22px;
}
.course-list-meta {
  display: flex;
  gap: 32px;
  font-size: 14px;
  color: #888;
  margin-bottom: 18px;
  justify-content: center;
}
.course-list-difficulty {
  display: inline-block;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 16px;
  font-size: 15px;
  border: 2px solid #32C5FF;
  background: #f0f8ff;
  color: #32C5FF;
  transition: all 0.2s;
}
.course-list-difficulty.diff-1 {
  border-color: #32C5FF;
  background: #f0f8ff;
  color: #32C5FF;
}
.course-list-difficulty.diff-2 {
  border-color: #ff9800;
  background: #fff7e6;
  color: #ff9800;
}
.course-list-difficulty.diff-3 {
  border-color: #f56c6c;
  background: #fff0f0;
  color: #f56c6c;
}
.course-list-btns {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.course-list-btns .el-button {
  min-width: 120px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 0;
}
.course-search-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto 32px auto;
  max-width: 1200px;
  position: relative;
}
.course-search-bar .el-input {
  width: 340px;
  margin-right: 40px;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(50,197,255,0.08);
  background: #fff;
  transition: box-shadow 0.2s;
}
.course-search-bar .el-input .el-input__wrapper {
  border-radius: 24px;
  background: #f8fbfd;
  border: 1px solid #e0eaf2;
  box-shadow: none;
  font-size: 16px;
  padding: 8px 20px;
}
.course-search-bar .el-input.is-focus .el-input__wrapper {
  border-color: #32C5FF;
  box-shadow: 0 0 0 2px rgba(50,197,255,0.15);
}
</style>